<template>
<div>
  <div class="member-line">
    <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">会员分布情况</div>
    <div ref="memberLocation" style="width: 70%;height: 80%;"></div>
    <div class="location-cont">
      <div style="margin-left: 10px;line-height: 0;height: 30px;margin-top: 10px;display: flex" v-for="item in locationData">
        <div style="height: 30px;line-height: 30px">{{item.name}}---{{item.value}}</div>
      </div>
    </div>
  </div>
  <div class="member-sex-age-cont">
    <div>
      <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">性别数据</div>
      <div style="width: 90%;height: 80%" ref="sex" ></div>
    </div>
    <div>
      <div style="height: 30px;line-height: 30px;font-size: 17px;text-align: left;color:#acacac;">年龄数据</div><div>
      <div style="width: auto;height: 300px;" ref="age" ></div>
    </div>
  </div>

  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import * as echarts from 'echarts'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  sexData:[],
  ageText:[],
  ageValue:[],
  locationData:[]
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  /**
   * 请求***********************************
   */

  getsex(){
    this.$http({
      url:'member/data/sex',
      method:'get'
    }).then((res)=>{
      // console.log(res.data.list)
      this.sexData = res.data.list
      this.sexChart()


    })
  },
  getage(){
    this.$http({
      url:'member/data/age',
      method:'get'
    }).then((res)=>{
      // console.log(res.data.list)
      let data = []
      data = res.data.list
      for (let i = 0; i < data.length; i++) {
        this.ageText.push(data[i].name)
        this.ageValue.push(data[i].value)
      }

      this.agePilla()

    })
  },
  getlocation(){
    this.$http({
      url:'member/data/location',
      method:'get'
    }).then((res)=>{
      this.locationData = res.data.list
      this.chinMap()
      console.log(this.locationData)
    })
  },


  /**
   * 图表***********************************
   */
  sexChart(){
    echarts.init(this.$refs.sex).setOption({

      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: this.sexData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  },
  agePilla(){
    echarts.init(this.$refs.age).setOption({
      tooltip: {
        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        axisPointer: {// 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      color: ["#3398DB"],
      xAxis: {
        data: this.ageText,
        type: 'category',

        axisLabel: {
          textStyle: {
            show:true,
            fontFamily:'微软雅黑',
            color: "#3095ff",
            fontSize: '14',
          },
          interval: 0, rotate: 30
        }

      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data:this.ageValue
        },
      ]
    })
  },
  chinMap(){
    echarts.init(this.$refs.memberLocation).setOption({
      // 进行相关配置
      tooltip: {}, // 鼠标移到图里面的浮动提示框
      dataRange: {
        show: false,
        min: 0,
        max: 1000,
        text: ["High", "Low"],
        realtime: true,
        calculable: true,
        color: ["orangered", "#61ff00", "#0076ff","#ffe100"],
      },
      geo: {
        // 这个是重点配置区
        map: "china", // 表示中国地图
        roam: true,
        label: {
          normal: {
            show: true, // 是否显示对应地名
            textStyle: {
              color: "#fff",
            },
          },
        }
      },
      itemStyle: {
        normal: {
          borderColor: "#293171",
          borderWidth: "2",
          areaColor: "#0A0F33",
        },
        emphasis: {
          areaColor: null,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      series: [
        {
          type: "scatter",
          coordinateSystem: "geo", // 对应上方配置
        },
        {
          name: "人数分布", // 浮动框的标题
          type: "map",
          geoIndex: 0,
          data: this.locationData
        },
      ],



    })
  }


},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getsex()
  this.getage()
  this.getlocation()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
.member-line{
  margin: 0 auto;
  width: 100%;
  height: 600px;
  display: flex;
  /*line-height: 300px;*/
  /*font-size: 50px;*/
  /*background-color: #61b65b;*/
}
.member-sex-age-cont{
  display: flex;
  margin: 15px auto;
  width: 95%;
  height: 300px;

}
.member-sex-age-cont>div{
  width: 50%;
  height: 300px;
}
.location-cont{
  width: 27%;
  display: flex;
  line-height: 10px;
  align-content: flex-start;
  flex-flow: wrap;
  /*background-color: #2AF598;*/
}
</style>
